<template>
  <view class="page">
    <view class="search-bar">
      <view class="search-input">
        <input type="text" v-model="query.keywords" placeholder="请输入学号/姓名/内容" />
        <image class="icon-search" src="/static/images/icon_search.png" mode=""></image>
        <view class="search-button" @click="search">搜索</view>
      </view>
    </view>
    <u-dropdown ref="uDropdown" class="dropdown" :activeColor="dropdown.activeColor"
      :borderBottom="dropdown.borderBottom" :close-on-click-mask="dropdown.mask">
      <u-dropdown-item @change="talkTypeChange" v-model="query.talkType" :title="dropdown.talkTypeTitle"
        :options="dropdown.talkTypeOption"></u-dropdown-item>
      <u-dropdown-item @change="talkSubjectChange" v-model="query.talkSubject" :title="dropdown.talkSubjectTitle"
        :options="dropdown.talkSubjectOption"></u-dropdown-item>
      <u-dropdown-item @change="talkAddressTypeChange" v-model="query.talkAddressType"
        :title="dropdown.talkAddressTypeTitle" :options="dropdown.talkAddressTypeOption"></u-dropdown-item>
    </u-dropdown>
    <scroll-view class="scroll-list" scroll-y="true" @scrolltolower="loadMore">
      <view class="card-list">
        <view v-for="(item, index) in list" :key="index" class="card-item">
          <view class="card-item-hd"
            @click="navTo('../talkQueryStaticByAssistant/index?createDept=' + item.createDept)">
            <view class="card-title">{{item.createDeptName}}</view>
            <image src="../../../../static/images/icon_circle_arrow.png" mode=""></image>
            <view class="card-desc">当前谈话总数{{item.total}}条</view>
          </view>
          <view class="card-item-bd">
            <view class="statistics-list">
              <view class="statistics-item">
                <view class="statistics-item-hd">一对一谈话</view>
                <view class="statistics-item-bd primary">{{item.oneToOneSum}}</view>
              </view>
              <view class="statistics-item">
                <view class="statistics-item-hd">一对多谈话</view>
                <view class="statistics-item-bd">{{item.oneToManySum}}</view>
              </view>
              <view class="statistics-item">
                <view class="statistics-item-hd">家校联系</view>
                <view class="statistics-item-bd">{{item.familySum}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- <view class="uni-list" v-for="(item, index) in list" :key="index" style="margin-top: 5rpx;margin-bottom: 5rpx;">
        <u-card @head-click="navTo('../talkQueryStaticByAssistant/index?createDept='+item.createDept)">
          <view slot="head"
            style="font-weight:bold;font-size: 15px; text-align: center;text-decoration:underline; color: blue;">
            {{item.createDeptName}}
          </view>
          <view class="" slot="body">
            <u-table>
              <u-tr>
                <u-th width="28%">总数</u-th>
                <u-td>{{item.total}}</u-td>
              </u-tr>
              <u-tr>
                <u-th width="28%">一对一谈话</u-th>
                <u-td>{{item.oneToOneSum}}</u-td>
              </u-tr>
              <u-tr>
                <u-th width="28%">一对多谈话</u-th>
                <u-td>{{item.oneToManySum}}</u-td>
              </u-tr>
              <u-tr>
                <u-th width="28%">家校联系</u-th>
                <u-td>{{item.familySum}}</u-td>
              </u-tr>
            </u-table>
          </view>
        </u-card>
      </view> -->
      <u-loadmore class="loadmore" :status="loadStatus"></u-loadmore>
    </scroll-view>
  </view>
</template>
<script>
  import $time from '@/common/time.js';
  export default {
    data() {
      return {
        query: {
          current: 1,
          size: 10,
          keywords: '',
          talkBeginDate: '',
          talkBeginDate: '',
          talkType: '',
          talkSubject: '',
          talkAddressType: '',
        },
        list: [],
        pages: 0,
        loadStatus: 'loadmore',
        options: [],
        headStyle: {
          fontWeight: 'bold',
          color: '#606266',
          margin: '16rpx'
        },
        dropdown: {
          borderBottom: false,
          activeColor: '#3989FC',
          mask: true,
          talkTypeOption: [],
          talkTypeTitle: '谈话方式',
          talkSubjectOption: [],
          talkSubjectTitle: '谈话类型',
          talkAddressTypeOption: [],
          talkAddressTypeTitle: '谈话地点',
        },

      };
    },
    onLoad(params) {
      this.loadList();
      this.initTalkAddressType();
      this.initTalkSubject();
      this.initTalkType();
    },
    computed: {

    },
    methods: {
      navTo(url) {
        uni.navigateTo({
          url: url
        });
      },
      search(value) {
        this.list = [];
        this.query.current = 0;
        this.loadList();
      },
      loadList() {
        this.$u.api.mis.misAssistantTalk.queryStaticByDept(this.query).then(res => {
          if (!res.data.records || res.data.records.length == 0) {
            this.loadStatus = "nomore";
            return;
          }
          res.data.records.forEach((item) => {
            item.show = false;
          })
          this.list = this.list.concat(res.data.records);
          this.pages = res.pages;
          this.query.current = res.data.current;
          this.query.size = res.data.size;
          this.loadStatus = "loadmore";
        });
      },
      loadMore() {
        this.loadStatus = "loading";
        setTimeout(() => {
          this.query.current += 1;
          this.loadList();
        }, 100);
      },
      initTalkType() {
        this.$u.api.dictBizData({
          code: 'mis_talk_type'
        }).then(res => {
          let detaiList = [];
          let detailJson = {
            'label': '全部',
            'value': ''
          }
          detaiList.push(detailJson)
          res.data.forEach((item) => {
            detaiList.push({
              'label': item.dictValue,
              'value': item.dictKey
            });
          })
          this.dropdown.talkTypeOption = detaiList;
        });
      },
      initTalkAddressType() {
        this.$u.api.dictBizData({
          code: 'mis_talk_address'
        }).then(res => {
          let detaiList = [];
          let detailJson = {
            'label': '全部',
            'value': ''
          }
          detaiList.push(detailJson)
          res.data.forEach((item) => {
            detaiList.push({
              'label': item.dictValue,
              'value': item.dictKey
            });
          })
          this.dropdown.talkAddressTypeOption = detaiList;
        });
      },
      initTalkSubject() {
        this.$u.api.dictBizData({
          code: 'mis_talk_subject'
        }).then(res => {
          let detaiList = [];
          let detailJson = {
            'label': '全部',
            'value': ''
          }
          detaiList.push(detailJson)
          res.data.forEach((item) => {
            detaiList.push({
              'label': item.dictValue,
              'value': item.dictKey
            });
          })
          this.dropdown.talkSubjectOption = detaiList;
        });
      },
      talkTypeChange(index) {
        this.list = [];
        this.query.current = 0;
        this.query.talkType = index
        this.dropdown.talkTypeTitle = (index === '' ? '谈话方式' : this.getOptionLabel(this.dropdown.talkTypeOption,
          index));
        this.loadList()
      },
      talkAddressTypeChange(index) {
        this.list = [];
        this.query.current = 0;
        this.query.talkAddressType = index
        this.dropdown.talkAddressTypeTitle = (index === '' ? '谈话地点' : this.getOptionLabel(this.dropdown
          .talkAddressTypeOption, index));
        this.loadList()
      },
      talkSubjectChange(index) {
        this.list = [];
        this.query.current = 0;
        this.query.talkSubject = index
        this.dropdown.talkSubjectTitle = (index === '' ? '谈话类型' : this.getOptionLabel(this.dropdown.talkSubjectOption,
          index));
        this.loadList()
      },
    }
  };
</script>
<style lang="scss">
  .page {
    position: relative;
    background: #F7F7F7;
  }

  .search-bar {
    display: flex;
    align-items: center;
    padding: 16rpx 32rpx;
    background: #fff;
  }

  .search-input {
    position: relative;
    width: 100%;
    height: 64rpx;
    border-radius: 32rpx;
    background: #F7F7F7;
    overflow: hidden;

    input {
      width: 100%;
      height: 64rpx;
      border: 0;
      padding: 0 144rpx 0 64rpx;
      outline: 0;
      line-height: 64rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #999;
      background: transparent;
    }

    .icon-search {
      position: absolute;
      top: 21rpx;
      left: 21rpx;
      width: 22rpx;
      height: 22rpx;
    }

    .search-button {
      position: absolute;
      top: 0;
      right: 0;
      width: 144rpx;
      border-radius: 32rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 24rpx;
      font-weight: 700;
      color: #fff;
      background: #3989FC;
    }
  }

  .dropdown {
    height: 80rpx;
    background: #fff;

    &+.scroll-list {
      height: calc(100vh - var(--window-top) - var(--window-bottom) - 96rpx - 80rpx);
    }
  }

  .scroll-list {
    height: calc(100vh - var(--window-top) - var(--window-bottom) - 96rpx);

    .loadmore {
      padding: 32rpx;
    }
  }

  .card-list {
    display: flex;
    flex-direction: column;
    padding: 24rpx 24rpx 0;
  }

  .card-item {
    border-radius: 8rpx;
    padding: 32rpx;
    margin-bottom: 24rpx;
    background: #fff;
  }

  .card-item-hd {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;

    image {
      width: 40rpx;
      height: 40rpx;
      margin-top: 4rpx;
      vertical-align: top;
    }
  }

  .card-title {
    margin-right: 16rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: #333;
  }

  .card-desc {
    margin-left: auto;
    font-size: 28rpx;
    font-weight: 500;
    color: #3989FC;
  }

  .statistics-item {
    display: flex;
    align-items: center;
    height: 88rpx;
    border-radius: 8rpx;
    line-height: 88rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
    background: #f7f7f7;
    overflow: hidden;

    &+.statistics-item {
      margin-top: 2rpx;
    }
  }

  .statistics-item-hd {
    flex-shrink: 0;
    min-width: 188rpx;
    padding: 0 24rpx;
    font-weight: 700;
    background: #eee;
  }

  .statistics-item-bd {
    flex: 1;
    padding-left: 32rpx;

    &.primary {
      color: #3989FC;
    }
  }
</style>